<template>
    <div class="wrapper">
        <span class="back-btn" @click="router.back()">
            <el-icon>
                <Back />
            </el-icon>
        </span>
        <h1>资讯维护中心</h1>
        <el-input type="text" placeholder="请输入标题" style="margin-bottom : 20px;width:300px" v-model="title"></el-input>
        <div style="border: 1px solid #ccc">
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                :mode="mode" />
            <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
                :mode="mode" @onCreated="handleCreated" />
        </div>
        <div class="a">
            <el-button type="primary" @click="handleClick">提交修改</el-button>
        </div>

    </div>
</template>

<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { responseCallback } from '../../../../utils';
import { announcementAddApi, announcementChangeApi, announcementDetailApi } from '../../../../api/a';
import { useRoute, useRouter } from 'vue-router';
import { Back } from '@element-plus/icons-vue';
const route = useRoute();
const { params: { id } } = route;
const router = useRouter()
const editorRef = shallowRef()

const title = ref("");
const valueHtml = ref('')

const toolbarConfig = {}

function upload(files, field, actionUrl) {
    const fd = new FormData();
    fd.append(field, files[0], files[0].name);

    return fetch(actionUrl, {
        method: "POST",
        body: fd
    }).then(resp => resp.json());
}
const server = "/api/upload/image";
const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {
        uploadImage: {
            server,
            async customUpload(file: File, insertFn) {  // TS 语法
                // async customUpload(file, insertFn) {                   // JS 语法
                // file 即选中的文件
                // 自己实现上传，并得到图片 url alt href
                // 最后插入图片
                console.log()
                const res = await upload("wangeditor-uploaded-image", file, server);
                console.log(res);
                // insertFn(url, alt, href)
            }
        }
    }
}

responseCallback({
    promise: announcementDetailApi(undefined, { id }),
    cb(data) {
        const { title: a, content } = data;
        valueHtml.value = content;
        title.value = a;
    }
})


// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})
const mode = 'default'; // 或 'simple'
const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}

const handleClick = () => {
    responseCallback({
        promise: announcementChangeApi({
            content: valueHtml.value,
            title: title.value,
            id
        }),
        cb() {
            router.back();
            setTimeout(() => {
                location.reload();
            }, 1000)
        },
        successMessage: "提交修改成功，请联系审核员进行审核"
    })
}


</script>

<style lang="less" scoped>
h1 {
    color: #333;
    text-align: center;
    font-size: 28px;
    margin-bottom: 2rem;
}

img {
    display: inline-block;
}

.a {
    display: flex;
    justify-content: flex-end;

    margin-top: 1rem;

    .el-button {
        width: auto;
    }
}

.wrapper {
    position: relative;
}

.back-btn {
    position: absolute;
    left: 0;
    transform: translateY(-100%);
    width: 150px;
    font-size: 30px;
    cursor: pointer;
    color: var(--el-color-primary);
    transition: all .5s;

}
</style>